<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .dahezi {
        position: relative;
        width: 400px;
        height: 400px;
        top: 100px;
        margin: auto;
        overflow: hidden;
    }

    .dahezi .ul1 {
        position: absolute;
        width: 1000%;
        height: 100%;
        background-color: aqua;
        opacity: 0.1;
        margin-left: -100%;
        overflow: hidden;
    }

    .ul1 li {
        float: left;
        list-style: none;
        width: 10%;
        height: 100%;
        font-weight: 1000;
        font-size: 100px;
        color: red;
    }

    .ol1 {
        position: absolute;
        bottom: 0;
        left: 15%;
    }

    .ol1 li {
        float: left;
        list-style: none;
        margin-right: 10px;
        border-radius: 45%;
        cursor: default;
    }

    .current {
        background-color: grey;
    }
</style>

<body>
    <div class="dahezi">
        <ul class="ul1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <ol class="ol1">
        </ol>
    </div>
    <script>
        var dahezi = document.querySelector('.dahezi');
        var ul1 = document.querySelector('.ul1');
        var ol1 = document.querySelector('.ol1');
        //创建小圆点并且给第一个小圆点上色
        for (var i = 0; i < ul1.children.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = 'O';
            ol1.appendChild(li);
        }
        ol1.children[0].classList.add('current');
        //在开头创建末尾元素
        var li = document.createElement('li');
        li.innerHTML = ul1.children[ul1.children.length - 1].innerHTML;
        ul1.insertBefore(li, ul1.children[0]);
        //在末尾创建开头元素
        var li2 = document.createElement('li');
        li2.innerHTML = ul1.children[1].innerHTML;
        ul1.appendChild(li2);
        //自动播放
        var width = dahezi.offsetWidth;
        var index = 0;//从第二张开始算0
        var translatex = -index * width;
        var timer = setInterval(function () {
            index++;
            translatex = -index * width;
            ul1.style.transition = 'all .3s';
            ul1.style.transform = 'translateX(' + translatex + 'px)'
        }, 2000)
        //监听过过渡完成
        ul1.addEventListener('transitionend', function () {
            //如果到了最后一张就返回第一张
            if (index >= ul1.children.length - 2) {
                index = 0;
                translatex = -index * width;
                ul1.style.transition = 'none';
                ul1.style.transform = 'translateX(' + translatex + 'px)';
                //如果到了第一张前面那一张，就返回倒数第二张
            } else if (index < 0) {
                index = ul1.children.length - 3;
                translatex = -index * width;
                ul1.style.transition = 'none';
                ul1.style.transform = 'translateX(' + translatex + 'px)';
            }
            //小圆点跟随滚动
            ol1.querySelector('.current').classList.remove('current');
            ol1.children[index].classList.add('current');
        })
        //获取触摸时候坐标
        var startx = 0;
        var moveX = 0;
        dahezi.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX;
            clearInterval(timer);

        })
        //手指滑动，轮播图暂停且跟随手指滑动，小圆点跟随变化
        dahezi.addEventListener('touchmove', function (e) {
            moveX = e.targetTouches[0].pageX - startX;
            translatex = moveX + (-index * width);
            ul1.style.transition = 'none';
            ul1.style.transform = 'translateX(' + translatex + 'px)'
        })
        dahezi.addEventListener('touchend', function () {
            if (Math.abs(moveX) > dahezi.offsetWidth * 0.2) {
                if (moveX > 0) {
                    index--;
                } else if (moveX <= 0) {
                    index++;
                }
            }
            ul1.style.transition = 'all .3s';
            ul1.style.transform = 'translateX(' + -index * width + 'px)';
            timer = setInterval(function () {
                index++;
                translatex = -index * width;
                ul1.style.transition = 'all .3s';
                ul1.style.transform = 'translateX(' + translatex + 'px)'
            }, 2000)
        })
    </script>
</body>

</html>